<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>视频片花跳过器</title>
  <link rel="stylesheet" href="css/popup.css">
</head>
<body>
  <div class="container">
    <h1>视频片花跳过器</h1>
    
    <div class="status-section">
      <div id="status-message">未检测到视频</div>
    </div>
    
    <div class="mode-section">
      <h2>工作模式</h2>
      <div class="mode-options">
        <label>
          <input type="radio" name="mode" value="manual" checked> 手动模式
        </label>
        <label>
          <input type="radio" name="mode" value="auto"> 自动模式
        </label>
        <label>
          <input type="radio" name="mode" value="prompt"> 提示模式
        </label>
      </div>
    </div>
    
    <div class="manual-section">
      <h2>手动设置</h2>
      <div class="manual-controls">
        <div class="time-range">
          <div class="time-input">
            <span>从:</span>
            <div class="time-input-fields">
              <input type="number" id="skip-from-min" min="0" step="1" placeholder="分钟">
              <span>:</span>
              <input type="number" id="skip-from-sec" min="0" max="59" step="1" placeholder="秒">
            </div>
          </div>
          <div class="time-input">
            <span>到:</span>
            <div class="time-input-fields">
              <input type="number" id="skip-to-min" min="0" step="1" placeholder="分钟">
              <span>:</span>
              <input type="number" id="skip-to-sec" min="0" max="59" step="1" placeholder="秒">
            </div>
          </div>
          <button id="set-skip-range">设置跳过规则</button>
        </div>
        <div class="time-jump">
          <div class="time-input">
            <span>跳转到:</span>
            <div class="time-input-fields">
              <input type="number" id="jump-to-min" min="0" step="1" placeholder="分钟">
              <span>:</span>
              <input type="number" id="jump-to-sec" min="0" max="59" step="1" placeholder="秒">
            </div>
          </div>
          <button id="set-jump">立即跳转</button>
        </div>
      </div>
    </div>
    
    <div class="custom-rules-section">
      <h2>自定义规则</h2>
      <div class="custom-rules-list" id="custom-rules">
        <!-- 自定义规则将在这里动态添加 -->
      </div>
      <div class="add-rule">
        <div class="time-input">
          <span>从:</span>
          <div class="time-input-fields">
            <input type="number" id="rule-from-min" min="0" step="1" placeholder="分钟">
            <span>:</span>
            <input type="number" id="rule-from-sec" min="0" max="59" step="1" placeholder="秒">
          </div>
        </div>
        <div class="time-input">
          <span>到:</span>
          <div class="time-input-fields">
            <input type="number" id="rule-to-min" min="0" step="1" placeholder="分钟">
            <span>:</span>
            <input type="number" id="rule-to-sec" min="0" max="59" step="1" placeholder="秒">
          </div>
        </div>
        <button id="add-rule">添加规则</button>
      </div>
    </div>
    
    <div class="skipped-section">
      <h2>已跳过片段</h2>
      <div class="skipped-list" id="skipped-segments">
        <!-- 已跳过的片段将在这里动态添加 -->
      </div>
    </div>



  <style>
    .time-input {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    .time-input span {
      margin-right: 8px;
    }
    .time-input-fields {
      display: flex;
      align-items: center;
    }
    .time-input-fields input {
      width: 50px;
      text-align: center;
    }
    .time-input-fields span {
      margin: 0 4px;
    }
  </style>

  <script src="js/popup.js"></script>
</body>
</html> 